<template>
  <div class="min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      :title="title"
      :left-text="showBack ? '返回' : ''"
      :left-arrow="showBack"
      fixed
      placeholder
      @click-left="onClickLeft"
    />

    <!-- 主要内容区域 -->
    <main class="flex-1 overflow-auto">
      <slot />
    </main>

    <!-- 底部标签栏 -->
    <van-tabbar v-model="active" route fixed placeholder>
      <van-tabbar-item 
        v-for="item in tabbarItems" 
        :key="item.path"
        :to="item.path"
        :icon="item.icon"
      >
        {{ item.title }}
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getRouteTitle, getVisibleTabbarItems } from '~/src/config/tabbar'

const route = useRoute()
const router = useRouter()

// 当前激活的标签页
const active = ref(0)

// 是否显示返回按钮
const showBack = computed(() => {
  return route.path !== '/'
})

// 页面标题
const title = computed(() => {
  return getRouteTitle(route.path)
})

// 获取可见的导航项
const tabbarItems = computed(() => {
  return getVisibleTabbarItems()
})

// 返回上一页
const onClickLeft = () => {
  router.back()
}
</script> 